<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>H5拖放测试</title>
    <style type="text/css">
        #div1 {width: 336px; height: 336px;padding: 10px; border: 1px solid #aaaaaa}
        #div2,#div3 {float: left;width: 100px;height: 100px;margin: 10px;padding: 10px;border: 1px solid #aaaaaa}
    </style>
    <script type="text/javascript">

        /*
         放到何处 - ondragover
         ondragover 事件规定在何处放置被拖动的数据。
         默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。
         这要通过调用 ondragover 事件的 event.preventDefault() 方法：
        * */
        function allowDrop(ev) {
            ev.preventDefault()
        }

        /*
         进行放置 - ondrop
         当放置被拖数据时，会发生 drop 事件。
         在上面的例子中，ondrop 属性调用了一个函数，drop(event)：
        * */
        function drop(ev) {
            ev.preventDefault();
            var data=ev.dataTransfer.getData("Text");
            ev.target.appendChild(document.getElementById(data));
        }

        /*
         拖动什么 - ondragstart 和 setData()
         然后，规定当元素被拖动时，会发生什么。
         在上面的例子中，ondragstart 属性调用了一个函数，drag(event)，它规定了被拖动的数据。
         dataTransfer.setData() 方法设置被拖数据的数据类型和值：
         在这个例子中，数据类型是 "Text"，值是可拖动元素的 id ("drag1")。
        * */
        function drag(ev) {
            ev.dataTransfer.setData("Text",ev.target.id);
        }




    </script>
</head>
<body>
    <p>请把 W3School 的图片拖放到矩形中：</p>
    <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
    </div>
    <img id="drag1" src="../images/cute_Panda.JPG" draggable="true" ondragstart="drag(event)" width="336" height="336"/>

    <p>下面测试来回拖动</p>
    <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
        <img id="drag2" src="../images/lufei_Potraite.JPG" draggable="true" ondragstart="drag(event)" width="100" height="100"/>
    </div>
    <div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</body>
</html>